<template>
	<view class="content">
		<view class="header">
			<view class="header-content">
				<selfImg class="img-icon" src="/static/role/driver.png"></selfImg>
				<text class="text-name">{{ operator.userName + '-' + userInfo.plateNumber }}</text>
			</view>
		</view>
		<view class="body">
			<view class="row">
				<view class="cell" @click="byGroup(4)">
					<image class="img-cell" src="/static/logo/spot.png" mode="scaleToFill"></image>
					<text class="text-cell">今日排班</text>
				</view>
				<view class="cell" @click="byGroup(2)">
					<image class="img-cell" src="/static/logo/route.png" mode="scaleToFill"></image>
					<text class="text-cell">电子路单</text>
				</view>
				<view class="cell" @click="byGroup(3)">
					<image class="img-cell" src="/static/logo/spot.png" mode="scaleToFill"></image>
					<text class="text-cell">出站安检</text>
				</view>
				<view class="cell" @click="byGroup(1)">
					<image class="img-cell" src="/static/logo/car.png" mode="scaleToFill"></image>
					<text class="text-cell">车辆报修</text>
				</view>
				<view class="cell" @click="quit">
					<image class="img-cell" src="/static/logo/quit.png" mode="scaleToFill"></image>
					<text class="text-cell">退出登录</text>
				</view>
			</view>
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import tabBar from '@/components/tabBar.vue';
import selfImg from '@/components/selfImg.vue';
import common from '@/utils/common.js';
import apiHelp from '@/utils/apiHelp.js';
export default {
	data() {
		return {
			objUser: {}
		};
	},
	computed: { ...mapGetters(['operator', 'userInfo']) },
	components: {
		tabBar,
		selfImg
	},
	onLoad() {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
		// #ifndef MP
		uni.hideTabBar();
		// #endif
	},
	methods: {
		quit() {
			apiHelp.quit(this.token);
		},
		byGroup(type) {
			switch (type) {
				case 1:
					uni.navigateTo({
						url: '/pages/wrong/wrong?taskId=0&isWork=0'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/spotitem/spotitem'
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/spotcheck/spotcheck'
					});
					break;
				case 4:
					uni.navigateTo({
						url: '/pages/route/route'
					});
					break;
			}
		}
	}
};
</script>

<style lang="scss">
.content {
	height: 100%;
	width: 100%;
	flex-direction: column;
	background-color: white;
	.header {
		width: 100%;
		height: 450rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-size: 100% 100%; //关键代码，直接拉伸背景图
		background-image: url('/static/arrow.png');
		.header-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.img-icon {
			margin-top: 30rpx;
			width: 240rpx;
			height: 240rpx;
			border-radius: 50%;
		}
		.text-name {
			color: white;
			font-size: 38rpx;
			margin-top: 30rpx;
			margin-bottom: 80rpx;
			text-shadow: 0 1px #1b9cf1, 1px 0 #1b9cf1, -1px 0 #1b9cf1, 0 -1px #1b9cf1;
		}
	}

	.body {
		display: flex;
		flex-direction: column;
		.row {
			width: 100%;
			display: flex;
			justify-content: start;
			align-items: center;
			flex-flow: row wrap;
			.cell {
				width: 33.33%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 20rpx 0;
				.img-cell {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.text-cell {
					margin-top: 30rpx;
				}
			}
		}
	}
}
</style>
